<template>
  <div class="video-container">
    <video ref="video" class="video" autoplay muted></video>
  </div>
</template>
<script>
import {VideoFlv} from "@haiking/haiking-jstool";
export default {
  name: "VideoRealtime",
  data() {
    return {
      videoFlv: undefined,
    };
  },
  mounted() {
    this.initVideo();
  },
  methods: {
    initVideo() {
      const videoElement = this.$refs.video;
      this.videoFlv = new VideoFlv(
        {
          type: "flv", // 如果是直播流需要设置这个值为 true
          isLive: true, // 拉流示例地址，stream参数一定要和推流时所设置的流密钥一致，app是推流的uri
          url: "http://192.168.3.195/live?port=1935&app=live&stream=room",
          // url: "http://192.168.3.195/hls/room.m3u8",
          // url: "http://192.168.1.221/live?port=1935&app=live&stream=room",
        },
        {
          videoElement: videoElement,
          enableWorker: false, // 启用分离的线程进行转换
          enableStashBuffer: false, // 关闭IO隐藏缓冲区
          // stashInitialSize: 128, // 减少首帧显示等待时长
          // headers: {
          //   Authorization: this.$auth.getToken();,
          // },
        }
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.video-container {
  // width: 100%;
  // height: 100%;
  display: flex;
  overflow: hidden;

  .video {
    flex: 1;
  }
}
</style>
